<script setup>
import Echarts from '@/components/echarts/index.vue'
import { ref, onMounted,reactive } from 'vue'
import { getMultipleGridsLineOption } from '@/utils/echarts/multiple_grids_option.js'
import { Search } from '@element-plus/icons-vue'

const options = ref({})

const zhibiaolist = [
    { label: '进口温度', value: 'jkwd' },
    { label: '出口温度', value: 'ckwd' },
    { label: '日耗电量', value: 'rhdl' },
    { label: '日降费', value: 'rjf' },
]

const state = reactive({
    linechartloading: false,
    queryParams: {
        zbs: ['jkwd', 'ckwd', 'rhdl', 'rjf'],
        jh: '',
        djg: 100, // 值间隔
        zjg: 100, // 点间隔
    },
    tableData: []
})
const chartHeight = ref(state.queryParams.zbs.length * 150 + 150)


/**
 * 初始化echart
 */
function initLineChart() {
    const targetData = state.tableData
    const xAxisKey = 'rq'
    const seriesNameAndDataKey = zhibiaolist.filter(item => state.queryParams.zbs.includes(item.value)).map(item => {
        return {
            name: item.label,
            dataKey: item.value
        }
    })
    const titles = zhibiaolist.filter(item => state.queryParams.zbs.includes(item.value)).map(item => item.label)
    let rawoptions = getMultipleGridsLineOption(targetData, xAxisKey, seriesNameAndDataKey, titles, state.queryParams.djg, state.queryParams.zjg)
    options.value = rawoptions
}
/**
 * 查询表格数据
 */
function queryTableData() {
    state.linechartloading = true
    // 查询数据
    state.tableData = []
    for (let i = 0; i < 1080; i++) {
        state.tableData.push({ rq: '2025-01-' + (i + 1), jkwd: Math.round(Math.random() * 10), ckwd: Math.round(Math.random() * 10), rhdl: Math.round(Math.random() * 10), rjf: Math.round(Math.random() * 10) },)
    }
    if (state.tableData.length) {
        initLineChart()
    }
    state.linechartloading = false
}
// 图表点击事件
function lineChartClick(params, text) {
    options.value.series[params.seriesIndex].markPoint.data.push({
        value: params.data,
        coord: [params.dataIndex, params.data],
    })
}
const myEchartsRef = ref()
function zbselectChange() {
    // 动态变更容器高度
    chartHeight.value = state.queryParams.zbs.length * 150 + 150
    queryTableData()
    setTimeout(() => {
        myEchartsRef.value.resize()
    }, 0)
}

onMounted(() => {
    queryTableData()
})
</script>

<template>
    <el-container>
        <el-main>
            <el-card shadow="never">
                <el-form :model="state.queryParams" inline>
                    <el-form-item label="指标">
                        <el-select v-model="state.queryParams.zbs" placeholder="请选择" filterable multiple collapse-tags
                            collapse-tags-tooltip :max-collapse-tags="1" style="width: 200px;" clearable
                            @change="zbselectChange">
                            <el-option v-for="item in zhibiaolist" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="点间隔">
                        <el-input-number v-model="state.queryParams.djg" :min="1" :max="100" @change="initLineChart" />
                    </el-form-item>
                    <el-form-item label="值间隔">
                        <el-input-number v-model="state.queryParams.zjg" :min="1" :max="100" @change="initLineChart" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :icon="Search" @click="queryTableData"
                            :loading="state.tableLoading">查询</el-button>
                    </el-form-item>
                </el-form>

            </el-card>
            <el-card shadow="never" class="mt-5">
                <Echarts :option="options" @click="lineChartClick" deepOption ref="myEchartsRef"
                    :style="{ height: chartHeight + 'px', width: '100%' }" />
            </el-card>
        </el-main>
    </el-container>
</template>
